<!DOCTYPE html>
<html lang="ch">
<head>
    <title>监听属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：
        watch监视属性
        1.vue中watch默认不监测对象内部值的改变
        2.deep：true可以监测对象内部值的改变
    -->
    <div id="demo">
        <h3>今天天气很{{numbers.c.d.e}}</h3>
        <button @click="numbers.c.d.e++">切换天气</button> 
        <button @click="numbers.b++">切换天气{{numbers.b}}</button> 
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //关闭生产提示
        const vm = new Vue({
            el:"#demo",
            data:{
                name:"test",
                isHot:true,
                numbers:{
                    a:1,
                    b:1,
                    c:{
                        d:{
                            e:100
                        }
                    }
                }
            },
            
            watch:{
                numbers:{
                    deep:true,//开启深度监听
                    handler(){
                        console.log('被修改咯')
                    }
                },
                'numbers.b':{
                    handler(){
                        console.log("多结构中的值b变化咯")
                    }
                }
            }, 
        })
    </script>
</body>
</html>